<template>
  <button @click="increment">{{ count }}</button>
  {{ dobuleCount }}

  <Ul>
    <li v-for="item in counterStore.list" :key="item.defineComponent">
      {{ item.name }}
    </li>
  </Ul>
</template>

<script setup>
// 1.导入 use 打头的方法
import { onMounted } from 'vue';
import { useCounterStore } from './stores/counter';
import { storeToRefs } from 'pinia';



// 2.执行方法得到store实例对象
const counterStore = useCounterStore()
console.log(counterStore)



// 3.触发action
onMounted(() => {
  counterStore.getList()
})



// 4.解构赋值
// 直接解构赋值（此处响应式丢失）
// const { count, dobuleCount } = counterStore
// console.log(count,dobuleCount)  //普通值

// 方法包裹（保持响应式更新）         注：storeToRefs仅负责数据方面的，不负责方法
const { count, dobuleCount } = storeToRefs(counterStore)
console.log(count, dobuleCount) //refIml对象



// 5.方法的解构赋值
// 方法直接从原来的counterStore中解构赋值
const { increment } = counterStore



</script>

<style scoped></style>
